<template>
  <div class="container">
    <div class="main-inner">
      <div class="count-down"><van-count-down :time="questions.tb_time*1000" /></div>

      <div class="exam-detail" v-for="(item, index) in questions.data"  v-show="currentIndex === index">
        <div class="exam-detail-top">
          <div class="fz36">{{item.category | ques_type}}<span>( {{currentIndex+1}}/{{questions.data.length}} )</span></div>
        </div>
        <!-- 单选题 -->
        <div class="exam-detail-content" v-if="item.category === 4">
          <div class="exam-detail-title fz30">{{item.title}}</div>

          <label :for="'a'+index" v-if="item.a != ''" >
           <input :name="'t'+item.id" :id="'a'+index" type="radio" value="A">
          <div class="exam-options fz36" @click="chooseAnswer(item.category, index, 'A')">
            <span class="abc">a</span>
            <span class="exam-options-text">{{item.a}}</span>
            <i class="checklist">√</i>
          </div>
         </label>

          <label :for="'b'+index" v-if="item.b != ''">
            <input :name="'t'+item.id" value="B" :id="'b'+index" type="radio">
            <div class="exam-options fz36" @click="chooseAnswer(item.category, index, 'B')">
            <span class="abc">b</span>
            <span class="exam-options-text">{{item.b}}</span>
            <i class="checklist">√</i>
          </div>
          </label>

          <label :for="'c'+index" v-if="item.c != ''">
            <input :name="'t'+item.id" value="C" :id="'c'+index" type="radio">
            <div class="exam-options fz36" @click="chooseAnswer(item.category, index, 'C')">
              <span class="abc">c</span>
              <span class="exam-options-text">{{item.c}}</span>
              <i class="checklist">√</i>
            </div>
          </label>

          <label :for="'d'+index" v-if="item.d != ''">
            <input :name="'t'+item.id" value="D" :id="'d'+index" type="radio">
            <div class="exam-options fz36"  @click="chooseAnswer(item.category, index, 'D')">
              <span class="abc">d</span>
              <span class="exam-options-text">{{item.d}}</span>
              <i class="checklist">√</i>
            </div>
          </label>

          <label :for="'e'+index" v-if="item.e != ''">
            <input :name="'t'+item.id" value="E" :id="'e'+index" type="radio" >
            <div class="exam-options fz36" @click="chooseAnswer(item.category, index, 'E')">
              <span class="abc">e</span>
              <span class="exam-options-text">{{item.e}}</span>
              <i class="checklist">√</i>
            </div>
          </label>

          <label :for="'f'+index" v-if="item.f != ''">
            <input :name="'t'+item.id" value="F" :id="'f'+index" type="radio" >
            <div class="exam-options fz36" @click="chooseAnswer(item.category, index, 'F')">
              <span class="abc">f</span>
              <span class="exam-options-text">{{item.f}}</span>
              <i class="checklist">√</i>
            </div>
          </label>

        </div>
        <!-- 多选题 -->
        <div class="exam-detail-content" v-if="item.category === 2">
          <div class="exam-detail-title fz30">{{item.title}}</div>
          <label :for="'a'+index" v-if="item.a != ''">
            <input :name="'t'+item.id" value="A" :id="'a'+index" type="checkbox" >
            <div class="exam-options fz36" @click="chooseAnswer(item.category, index, 'A')">
              <span class="abc">a</span>
              <span class="exam-options-text">{{item.a}}</span>
              <i class="checklist">√</i>
            </div>
          </label>

          <label :for="'b'+index" v-if="item.b != ''">
            <input :name="'t'+item.id" value="B" :id="'b'+index" type="checkbox" >
            <div class="exam-options fz36" @click="chooseAnswer(item.category, index, 'B')">
              <span class="abc">b</span>
              <span class="exam-options-text">{{item.b}}</span>
              <i class="checklist">√</i>
            </div>
          </label>

          <label :for="'c'+index" v-if="item.c != ''">
            <input :name="'t'+item.id" value="C" :id="'c'+index" type="checkbox" >
            <div class="exam-options fz36" @click="chooseAnswer(item.category, index, 'C')">
              <span class="abc">c</span>
              <span class="exam-options-text">{{item.c}}</span>
              <i class="checklist">√</i>
            </div>
          </label>

          <label :for="'d'+index" v-if="item.d != ''">
            <input :name="'t'+item.id" value="D" :id="'d'+index" type="checkbox" >
            <div class="exam-options fz36" @click="chooseAnswer(item.category, index, 'D')">
              <span class="abc">d</span>
              <span class="exam-options-text">{{item.d}}</span>
              <i class="checklist">√</i>
            </div>
          </label>

          <label :for="'e'+index" v-if="item.e != ''">
            <input :name="'t'+item.id" value="E" :id="'e'+index" type="checkbox" >
            <div class="exam-options fz36" @click="chooseAnswer(item.category, index, 'E')">
              <span class="abc">e</span>
              <span class="exam-options-text">{{item.e}}</span>
              <i class="checklist">√</i>
            </div>
          </label>

          <label :for="'f'+index" v-if="item.f != ''">
            <input :name="'t'+item.id" value="F" :id="'f'+index" type="checkbox" >
            <div class="exam-options fz36" @click="chooseAnswer(item.category, index, 'F')">
              <span class="abc">f</span>
              <span class="exam-options-text">{{item.f}}</span>
              <i class="checklist">√</i>
            </div>
          </label>
        </div>
        <!-- 【判断题】 -->
        <div class="exam-detail-content" v-if="item.category === 1">
          <div class="exam-detail-title fz30">{{item.title}}</div>

          <label :for="item.id + 'yes'" @click="chooseAnswer(item.category, index, 'Y')">
            <input :name="'t'+item.id" value="Y" :id="item.id + 'yes'" type="radio" >
            <div class="exam-options fz36">
              <span class="abc">a</span>
              <span class="exam-options-text">正确</span>
              <i class="checklist">√</i>
            </div>
          </label>

          <label :for="item.id + 'no'" @click="chooseAnswer(item.category, index, 'N')">
            <input :name="'t'+item.id" value="N" :id="item.id + 'no'" type="radio" >
            <div class="exam-options fz36">
              <span class="abc">b</span>
              <span class="exam-options-text">错误</span>
              <i class="checklist">√</i>
            </div>
          </label>
        </div>
        <!-- 【填空题】 -->
        <div class="exam-detail-content" v-if="item.category === 3">
          <div class="exam-detail-title fz30">{{item.title}}</div>

        </div>
      </div>

      <!--<div class="answer-card fz30"><span>#</span><span class="answer-card-text">答题卡</span></div>-->
    </div>

    <!-- 答题卡弹窗 -->
    <van-popup v-model="showCard" title="答题卡" width="90%">
      <div class="container">
        <div class="main-inner">
          <div class="answer-car-item">
            <div class="fz36 mb15">单选题 <span class="card-total">(共10题)</span></div>
            <div class="question-no-wrapper">
              <span
                v-for="(item, index) in single"
                :class="[item.isAnswer ? 'select' : '', 'question-no']"
                @click="toQuestion(item)">
                {{index+1}}
              </span>
            </div>
          </div>

          <div class="answer-car-item">
            <div class="fz36 mb15">多选题<span class="card-total">(共10题)</span></div>
            <div class="question-no-wrapper">
              <span
                v-for="(item, index) in multiple"
                :class="[item.isAnswer ? 'select' : '', 'question-no']"
                @click="toQuestion(item)">
                {{index+1}}
              </span>
            </div>
          </div>
          <div class="answer-car-item">
            <div class="fz36 mb15">判断题<span class="card-total">(共10题)</span></div>
            <div class="question-no-wrapper">
              <span
                v-for="(item, index) in judgment"
                :class="[item.isAnswer ? 'select' : '', 'question-no']"
                @click="toQuestion(item)">
                {{index+1}}
              </span>
          </div>
          </div>
          <div class="save-paper">
            <button class="exam-btn" @click="savePaper">提交试卷</button>
          </div>
        </div>
      </div>
    </van-popup>
    <div class="btn-wrapper">
      <button v-if="currentIndex === 0" class="exam-btn" @click="toNext">下一题</button>
      <div class="btn-wrapper" v-else>
        <button class="btn-back exam-btn" @click="goBack">上一题</button>
        <button class="btn-next exam-btn" @click="toNext">
          <span v-if="currentIndex === questions.data.length-1">完成答题</span>
          <span v-else>下一题</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
  import util from '@/common/util';
  export default {
    data() {
      return {
        id: '',
        idcard: '',
        currentIndex: 0,
        questions: '',
        showCard: false,
        single: [],
        multiple: [],
        judgment: [],
        completion: [],
      }
    },
    created() {
      let that = this;
      that.id = that.$route.query.id;
      if(util.storage.get('userinfo')){
        that.idcard = util.storage.get('userinfo').idcard;
      }
      console.log('id',that.id)
      console.log('idcard',that.idcard)
      that.getPaperInfo(); // 调用获取试题

    },
    methods: {
      // 选择答题
      chooseAnswer(category, question_index, option){
        let that = this;
        that.questions.data.forEach(function(item, index){
          if(question_index == index){
            that.questions.data[index].isAnswer = true;
            if(category == 4 || category == 1) { // 单选题 判断题
              that.questions.data[index].answer = [];
              that.questions.data[index].answer.push(option)
            } else if(category == 2){ // 多选题
              let i = util.in_array(option, that.questions.data[index].answer);
              if(i){
                that.questions.data[index].answer.splice(i, 1)
                //console.log('数组个数',that.questions.data[index].answer.length);
                if(that.questions.data[index].answer.length === 0){
                  that.questions.data[index].isAnswer = false;
                }
              }else{
                that.questions.data[index].answer.push(option)
              }
            }
          }
        });
        console.log('选择答案后：',that.questions.data)
        that.questionType(that.questions.data);
       //console.log('single',that.single)
      },

      // 填空答题
      // fillAnswer(question_index, text){
      //
      //   r.data.data.forEach(function(item, index){
      //     if(question_index == index){
      //       r.data.data[index].answer.push(text)
      //     }
      //   })
      //
      // },

      getPaperInfo() { //获取试题
        let that = this;
        console.log(that.id)
        that.$api.post('/mobile/Kcks/ksks',{'id':that.id}, r => {
          console.log('试题：', r.data);
          r.data.data.forEach(function(item,index){
            r.data.data[index].oldId = index;
            r.data.data[index].isAnswer = false;
            r.data.data[index].answer = [];
          });
          that.questions = r.data;
          that.questionType(r.data.data);
        });
      },
      toNext() { //下一题
        let that = this;
        if(that.currentIndex < that.questions.data.length - 1){
          that.currentIndex += 1;
        }else{
          that.showCard = true;
        }
      },
      goBack() { //上一题
        let that =this;
        if(that.currentIndex > 0) {
          that.currentIndex -= 1;
        }
      },

      questionType(quesArr) {  // 题型分类
        let that = this;
        that.single = [];
        that.multiple = [];
        that.judgment = [];
        that.completion = [];
        quesArr.forEach(function(item,index){ // 题型分类
          if(item.category === 4){
            that.single.push(item);
          } else if(item.category === 2) {
            that.multiple.push(item);
          } else if(item.category === 1) {
            that.judgment.push(item);
          } else {
            that.completion.push(item);
          }
        });
      },

      toQuestion(e) { // 跳到指定试题
        let that = this;
       // console.log(e)
        //console.log(e.oldId);
        that.currentIndex = e.oldId;
        that.showCard = false;
      },
      savePaper() {
        let that = this;
        console.log(this.questions.data)
        let formData = {};
        formData['pageid'] = that.questions.id;
        formData['kcid'] = that.questions.data[0].kcid;
        formData['idcard'] = that.idcard;
        that.questions.data.forEach(function(item){
          if(item.category === 4 || item.category === 1 ){
            formData['t'+item.id] = (item.answer).toString();
          } else if (item.category === 2) {
            formData['t'+item.id] = item.answer;
          }
        });
        console.log('formData',formData)
        that.$dialog.confirm({
          title: '确定提交试卷吗？',
          message: '提交以后就会生成为成绩分数，无法  \t     再修改答案了哦，确定提交吗？',
        }).then(() => {
          that.$api.post('/mobile/Kcks/checkans',{'user':formData}, r => {
            console.log('提交试卷成功',r)
            if(r.code === 1){
              that.$router.replace({path:'/examinationList',query: {id: r.data.kcid}})
            }
          })
        })
          .catch(() => {
          // on cancel
          });

      }
    }

  }
</script>

<style scoped>
  .count-down {
    position: absolute;
    right: 13px;

  }
  .exam-detail-top {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;;
  }
  .exam-detail-title {
    line-height: 1.5;
  }
  .exam-options {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    margin-top: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 1px solid #d3d3d3;
  }
  .exam-options-text {
    flex: 1;
    padding-left: 12px;
    text-align: left;
  }
  /*.exam-options.checked {*/
    /*border: 1px solid #098aff;*/
    /*color: #098aff;*/
  /*}*/
  .abc {
    padding-right: 12px;
    border-right: 1px solid #d3d3d3;
    text-transform: uppercase;
  }

  .answer-card {
    display: flex;
    align-items: center;
    position: fixed;
    right: 0;
    bottom: 150px;
    width: 56px;
    height: 32px;
    padding: 0 15px;
    color: #fff;
    background-color: #2d87fd;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  /*单选框的美化CSS*/
  input[type="radio"],input[type="checkbox"]{
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display:none
  }
  label{
    cursor:pointer;
  }
  label input[type="radio"] + .exam-options .checklist,label input[type="checkbox"] + .exam-options .checklist {
    display: none;
  }
  label input[type="radio"]:checked + .exam-options .checklist, label input[type="checkbox"]:checked + .exam-options .checklist {
    display: block;
  }
  label input[type="radio"]:checked + .exam-options, label input[type="checkbox"]:checked + .exam-options{
    border: 1px solid #098aff;
    color: #098aff;
  }

  /* 答题卡 */
  .answer-car-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .card-total {
    font-size: .28rem;
    color: #8c9aa5;
  }
  .question-no-wrapper {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    margin-left: -5px;
    margin-right: -5px;
  }
  .question-no {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 5px 10px;
    font-size: 17px;
    border: 1px solid #d2d2d2;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }
  .question-no.select {
    background-color: #3698fb;
    color: #fff;
    border: 1px solid #3698fb;
  }
  .van-popup--center {
    width: 100%;
    height: 78%!important;
  }
  .save-paper {
    position: absolute;
    width: 94%;
    bottom: 20px;
  }
</style>
